<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        *{margin: 0;padding: 0;}

        .out{
            width: 280px;
            height: 100px;
            margin: 100px auto;
            border-bottom: 1px solid #000;
        }

        img{
            width: 90px;
            height: 90px;
            border-radius: 50%;
            border: 3px solid rgba(221, 212, 212, 0.979);
            }

        .out img:hover{
            border-color: burlywood;
        }

        .text{
            width: 160px;
            height: 150px;      
            display: inline-block;
            vertical-align: middle;
        }

        .p1{
            font-size: 14px;
            text-align: center;
        }
        .p2{
            font-size: 12px;
        }
        .text p:hover{
            color:cyan;    
        }
    </style>
</head>
<body>
   <div class="out"> 
           <img src="../imgs/exo.jpg">
       <div class="text">
           <p class="p1">十二月的奇迹</p><br>
           <p class="p2">我望眼欲穿&nbsp;&nbsp;看我看不到的你<br>
                           我侧耳倾听&nbsp;&nbsp;听我听不到的你</p>
       </div>
    </div>
</body>
</html>